import React, { Component } from 'react';
import '../../styles/Mine.scss'
import * as service from '../../api/index'
import { withRouter } from "react-router-dom";
import { RightOutline, SetOutline, StarFill, CheckCircleFill, KoubeiFill, TeamFill, MessageFill, LocationFill, SmileFill, EditSFill, QuestionCircleFill } from 'antd-mobile-icons'



import { TabBar } from 'antd-mobile'
class Mine extends Component {
    state = {
        utillist: [
            {
                key: '/myfav',
                title: '我的收藏',
                icon: <StarFill />,
            },
            {
                key: '/myrate',
                title: '我的评价',
                icon: <CheckCircleFill />,
            },
            {
                key: '/coupon',
                title: '优惠券',
                icon: <KoubeiFill />,
            },
            {
                key: '/performer',
                title: '观演人',
                icon: <TeamFill />,
            },
            {
                key: '/mygroup',
                title: '我的群组',
                icon: <MessageFill />,
            },
            {
                key: '/address',
                title: '地址管理',
                icon: <LocationFill />,
            },
            {
                key: '/service',
                title: '咨询客服',
                icon: <SmileFill />,
            },
            {
                key: '/feedback',
                title: '意见反馈',
                icon: <EditSFill />,
            },
            {
                key: '/problem',
                title: '常见问题',
                icon: <QuestionCircleFill />,
            },
        ]
    }
    handleChange(key) {
        this.props.history.push(key)
    }
    render() {
        return (
            <div className='mine'>
                <div className="set">
                    <SetOutline fontSize={20} />
                </div>
                <div className="userinfo">
                    <img src="#" alt="" />
                    <div className="text">
                        <div className="name">
                            姓名
                        </div>
                        <div className="follow_fans">
                            <div className="follow">
                                关注 108
                            </div>
                            <div className="fans">
                                粉丝 10
                            </div>
                        </div>
                    </div>
                    <div className="personpage">
                        个人主页 <RightOutline />
                    </div>
                </div>
                <div className="begin">
                    <div className="starting">
                        即将开始
                    </div>
                    <div className="message">
                        <img src="#" alt="" />
                        <div className="text">
                            <div className="name">
                                剧名
                            </div>
                            <div className="starttime">
                                2020年09月17日 19:00
                            </div>
                        </div>
                        <div className="order_details">
                            <RightOutline />
                        </div>
                    </div>
                </div>
                <div className="myorder">
                    <span>我的订单</span>
                    <div className="orderlist">
                        <RightOutline />
                    </div>
                </div>
                <div className="utils">
                    <div className="title">
                        常用工具
                    </div>
                    <TabBar className='utillist' defaultActiveKey="null" onChange={(key) => { this.handleChange(key) }}>
                        {this.state.utillist.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))}
                    </TabBar>

                </div>
            </div>
        );
    }
}

export default withRouter(Mine);